(function () {
    const myCharts = {
        el:'',
        eChart: '',
        data: '',
        legend: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
        title: '',
        tooltipText: ['K线', '开', '收', '低', '高'],
        init(dom, data, title) {
            this.dom = dom;
            this.title = title;
            this.el=document.getElementById(dom);
            this.eChart = echarts.init(this.el);
            this.data = this.splitData(data);
            this.eChart.setOption(this.getOption(),true);
            return this;
        },
        // 计算MA平均线，N日移动平均线=N日收盘价之和/N  dayCount要计算的天数(5,10,20,30)
        calculateMA(dayCount, data) {
            let result = [];
            for (let i = 0, len = data.values.length; i < len; i++) {
                if (i < dayCount) {
                    result.push('-');
                    continue;   //结束单次循环，即不输出本次结果
                }
                let sum = 0;
                for (let j = 0; j < dayCount; j++) {
                    //收盘价总和
                    sum += data.volumes[i - j][1];
                }
                result.push(sum / dayCount);
            }
            return result;
        },
        // 数据意义：时间，开盘(open)，收盘(close)，最低(lowest)，最高(highest)
        //切割数组，把数组中的日期和数据分离，返回数组中的日期和数据
        splitData(rawData) {
            let categoryData = [];
            let values = [];
            let volumes = [];

            for (let i = 0; i < rawData.length; i++) {
                //splice 返回每组数组中被删除的第一项，即返回数组中被删除的日期
                //categoryData  日期  把返回的日期放到categoryData[]数组中
                categoryData.push(rawData[i].splice(0, 1)[0]);

                //数据数组，即数组中除日期外的数据
                // values.push(rawData[i])
                values.push({
                    value: rawData[i],
                    itemStyle: {
                        color: '#FD6433', // 阳线颜色
                        color0: '#26BF66',// 阴线颜色
                    }
                })
                volumes.push([i, rawData[i][3], rawData[i][0] > rawData[i][1] ? 1 : -1]);
            }
            return {
                categoryData: categoryData, //数组中的日期 x轴对应的日期
                values: values,             //数组中的数据 y轴对应的数据
                volumes: volumes             //柱状图
            };
        },
        getOption() {
            const tooltipText = this.tooltipText;
            const options = {
                title: {    //标题
                    text: this.title,
                    left: 0,
                    textStyle: {
                        color: '#959595'
                    }
                },
                tooltip: {  //提示框
                    trigger: 'axis',    //触发类型：坐标轴触发
                    axisPointer: {  //坐标轴指示器配置项
                        type: 'cross',   //指示器类型，十字准星
                        label: {
                            backgroundColor: 'rgba(50,50,50,0.7)',
                        }
                    },
                    formatter(params, ticket, callback) {
                        let result = params[0].name + "<br/>";
                        params.forEach(function (item) {
                            if (item.seriesName == "日K") {
                                result += item.marker + " " + item.seriesName
                                    + "  (" + item.value.toString().split(",")[1] + "，" +
                                    +item.value.toString().split(",")[2] + ")</br>";
                            } else {

                                if (item.seriesType === "bar") {
                                    console.log()
                                } else {
                                    if (item.data.value) {
                                        Array.from(item.data.value).forEach((d, i) => {

                                            result += item.marker + " " + tooltipText[i] + " : " + d.toString() + "</br>";
                                        })
                                    } else {
                                        result += item.marker + " " + item.seriesName + " : " + item.value.toFixed(2).toString() + "</br>";
                                        // Array.from(item.data).forEach((d, i) => {
                                        //     result += item.marker + " " + tooltipText[i] + " : " + d.toFixed(2).toString() + "</br>";
                                        // })
                                    }
                                }

                            }

                        });

                        return result;
                    }
                },
                legend: {   //图例控件，点击图例控制哪些系列不现实
                    data: this.legend,
                    top: 10,
                    textStyle: {
                        color: '#ffffff'
                    },
                    show: true,
                },
                visualMap: {
                    show: false,
                    seriesIndex: 5,
                    dimension: 2,
                    pieces: [{
                        value: 1,
                        color: '#26BF66'
                    }, {
                        value: -1,
                        color: '#FD6433'
                    }]
                },
                grid: [{     //直角坐标系
                    show: true,
                    left: '15%',    //grid组件离容器左侧的距离
                    right: '10%',
                    bottom: '40%',
                    backgroundColor: '#1C1734',
                    borderColor: '#2A2641'
                }, {
                    left: '16%',
                    right: '10%',
                    bottom: '5%',
                    height: '30%'
                }],
                xAxis: [
                    {
                        type: 'category',   //坐标轴类型，类目轴
                        data: this.data.categoryData,
                        //scale: true,  //只在数字轴中有效
                        boundaryGap: false,    //刻度作为分割线，标签和数据点会在两个刻度上
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: '#959595'
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#2A2641']
                            }
                        },   //是否显示坐标轴轴线
                        splitArea: {
                            show: false  //显示分割区域
                        },
                        // splitNumber: 20,    //坐标轴的分割段数，预估值，在类目轴中无效
                        min: 'dataMin', //特殊值，数轴上的最小值作为最小刻度
                        max: 'dataMax'  //特殊值，数轴上的最大值作为最大刻度
                    },
                    {
                        type: 'category',
                        gridIndex: 1,
                        data: this.data.categoryData,
                        scale: true,
                        boundaryGap: false,
                        axisLine: {onZero: false},
                        axisTick: {show: false},
                        splitLine: {show: false},
                        axisLabel: {show: false},
                        splitNumber: 20,
                        min: 'dataMin',
                        max: 'dataMax'
                    }
                ],
                yAxis: [
                    {
                        scale: true,    //坐标刻度不强制包含零刻度
                        splitArea: {
                            show: false  //显示分割区域
                        },
                        axisLine: {
                            // onZero: false,
                            lineStyle: {
                                color: '#959595'
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#2A2641']
                            }
                        },   //是否显示坐标轴轴线
                    },
                    {
                        scale: true,
                        gridIndex: 1,
                        splitNumber: 2,
                        axisLabel: {show: false},
                        axisLine: {show: false},
                        axisTick: {show: false},
                        splitLine: {show: false}
                    }
                ],
                dataZoom: [
                    {
                        type: 'inside',
                        start: 50,
                        end: 100,
                        xAxisIndex:[0,1]
                    },
                    // {
                    //     show: true,
                    //     type: 'slider',
                    //     y: '90%',
                    //     start: 50,
                    //     end: 100,
                    //     xAxisIndex:[0,1]
                    // }
                ],
                color: ['#fa3d50', '#fa3df0', '#3dfa51', '#3dfaf2', '#e9fa3d', '#8afa3d', '#8a3dfa', '#3d5bfa', '#fab13d', '#fa3da9', '#125625'],
                series: [   //图表类型
                    {
                        // name: '日K',
                        type: 'candlestick',    //K线图
                        data: this.data.values,     //y轴对应的数据

                        ////////////////////////图标标注/////////////////////////////

                        markPoint: {    //图表标注
                            label: {    //标注的文本
                                normal: {   //默认不显示标注
                                    show: true,
                                    //position:['20%','30%'],
                                    formatter: function (param) {   //标签内容控制器
                                        return param != null ? Math.round(param.value) : '';
                                    }
                                }
                            },
                            data: [     //标注的数据数组
                                {
                                    name: 'XX标点',
                                    coord: ['2013/5/31', 2300], //指定数据的坐标位置
                                    value: 2300,
                                    itemStyle: {    //图形样式
                                        normal: {color: 'rgb(41,60,85)'}
                                    }
                                },
                                {
                                    name: 'highest value',
                                    type: 'max',    //最大值
                                    valueDim: 'highest'     //在highest维度上的最大值 最高价
                                },
                                {
                                    name: 'lowest value',
                                    type: 'min',
                                    valueDim: 'lowest'  //最低价
                                },
                                {
                                    name: 'average value on close',
                                    type: 'average',
                                    valueDim: 'close'   //收盘价
                                }
                            ],
                            tooltip: {      //提示框
                                formatter: function (param) {
                                    return param.name + '<br>' + (param.data.coord || '');
                                }
                            },

                        },


                        markLine: {
                            symbol: ['none', 'none'],   //标线两端的标记类型
                            data: [
                                [
                                    {
                                        name: 'from lowest to highest',
                                        type: 'min',    //设置该标线为最小值的线
                                        valueDim: 'lowest', //指定在哪个维度上的最小值
                                        symbol: 'circle',
                                        symbolSize: 10, //起点标记的大小
                                        label: {    //normal默认，emphasis高亮
                                            normal: {show: false},  //不显示标签
                                            emphasis: {show: false} //不显示标签
                                        }
                                    },
                                    {
                                        type: 'max',
                                        valueDim: 'highest',
                                        symbol: 'circle',
                                        symbolSize: 10,
                                        label: {
                                            normal: {show: false},
                                            emphasis: {show: false}
                                        }
                                    }
                                ],

                                {
                                    name: 'min line on close',
                                    type: 'min',
                                    valueDim: 'close'
                                },
                                {
                                    name: 'max line on close',
                                    type: 'max',
                                    valueDim: 'close'
                                }
                            ]

                        }

                    },

                    {   //MA5 5天内的收盘价之和/5
                        name: 'MA5',
                        type: 'line',
                        data: this.calculateMA(5, this.data),
                        smooth: true,
                        lineStyle: {
                            normal: {opacity: 0.5}
                        }
                    },
                    {
                        name: 'MA10',
                        type: 'line',
                        data: this.calculateMA(10, this.data),
                        smooth: true,
                        lineStyle: {    //标线的样式
                            normal: {opacity: 0.5}
                        }
                    },
                    {
                        name: 'MA20',
                        type: 'line',
                        data: this.calculateMA(20, this.data),
                        smooth: true,
                        lineStyle: {
                            normal: {opacity: 0.5}
                        }
                    },
                    {
                        name: 'MA30',
                        type: 'line',
                        data: this.calculateMA(30, this.data),
                        smooth: true,
                        lineStyle: {
                            normal: {opacity: 0.5}
                        }
                    },
                    {
                        name: 'Volume',
                        type: 'bar',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        data: this.data.volumes
                    }


                ]
            };
            return options;
        }
    }

    window.myCharts = myCharts;
}());